<template>
	<div class="sidebar">
		<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
		 text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
			<template v-for="item in items">
				<template v-if="item.subs">
					<el-submenu :index="item.index" :key="item.index">
						<template slot="title">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.title }}</span>
						</template>
						<template v-for="subItem in item.subs">
							<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
								<template slot="title">{{ subItem.title }}</template>
								<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
							</el-submenu>
							<el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
						</template>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index" :key="item.index">
						<!-- <i :class="item.icon"></i> -->
						<span slot="title">{{ item.title }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
import bus from '../common/bus';
export default {
    data() {
        return {
            collapse: false,
            items: [
                {
                    index: 'dashboard',
                    title: '系统首页'
                },
                {
                    index: '1',
                    title: '门店管理系统',
                    subs: [
                        {
                            index: 'goodsManage',
                            title: '商品管理'
                        },
                        {
                            index: '1-1', //单页面直接将路由写在这
                            title: '服务管理',
                            subs: [
                                //有多个分支，将路由写在subs里
                                {
                                    index: 'serviceManage',
                                    title: '服务管理'
                                }
                            ]
                        },
                        {
                            index: 'showRequest',
                            title: '门店申请'
                        },
                        {
                            index: 'orderManage',
                            title: '订单管理'
                        },
                        {
                            index: 'selectSupplier',
                            title: '选择供应商货品'
                        },
                        {
                            index: 'pos-sale',
                            title: '门店销量统计'
                        },
                        {
                            index: 'pos-saleroom',
                            title: '门店销售额统计'
                        }
                    ]
                }
            ]
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
    }
};
	
</script>

<style scoped>
	.sidebar {
		display: block;
		position: absolute;
		left: 0;
		top: 70px;
		bottom: 0;
		overflow-y: scroll;
	}

	.sidebar::-webkit-scrollbar {
		width: 0;
	}

	.sidebar-el-menu:not(.el-menu--collapse) {
		width: 250px;
	}

	.sidebar>ul {
		height: 100%;
	}
</style>
